<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE>
<html>

<head>
<title>系统概览</title>
<script src="media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="media/css/jquery.easy-pie-chart.css" rel="stylesheet"
	type="text/css" media="screen" />
<script src="media/js/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
</head>

<body>
	<div style="padding: 20px;">

		<div class="row-fluid">
			<div class="span6">
				<div class="portlet box blue">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-calendar"></i>数据库运行总览
						</div>
					</div>
					<div class="portlet-body">
						<div class="row-fluid" >
							<div class="span4">
								<div class="easy-pie-chart">
									<div class="number green" id="workstatus"
										data-percent="${dbstatus.right*100/dbstatus.all}">
										<span><fmt:formatNumber type="number"
												value="${dbstatus.right*100/dbstatus.all}"
												maxFractionDigits="2" />%</span>
									</div>
									<a class="title" href="#">运行状态</a> <span>${dbstatus.right}
										/ ${dbstatus.all}</span>
								</div>
							</div>

							<div class="margin-bottom-10 visible-phone"></div>

							<div class="span4">
								<div class="easy-pie-chart">
									<div class="number green" id="backupstatus"
										data-percent="${dbstatus.backuped*100/dbstatus.backupall}">
										<span><fmt:formatNumber type="number"
												value="${dbstatus.backuped*100/dbstatus.backupall}"
												maxFractionDigits="2" />%</span>
									</div>
									<a class="title" href="#">备份状态</a> <span>${dbstatus.backuped}
										/ ${dbstatus.backupall}</span>
								</div>
							</div>

							<div class="margin-bottom-10 visible-phone"></div>

							<div class="span4">
								<div class="easy-pie-chart">
									<div class="number green" id="connumstatue"
										data-percent="${dbstatus.connumok*100/dbstatus.connumall}">
										<span><fmt:formatNumber type="number"
												value="${dbstatus.connumok*100/dbstatus.connumall}"
												maxFractionDigits="2" />%</span>
									</div>
									<a class="title" href="#">连接数正常</a> <span>${dbstatus.connumok}
										/ ${dbstatus.connumall}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="span6">
				<div class="portlet box blue">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-calendar"></i>服务器运行总览
						</div>
					</div>
					<div class="portlet-body">
						<div class="row-fluid">
							<div class="span4">
								<div class="easy-pie-chart">
									<div class="number green" id="diskstatus"
										data-percent="${svstatus.highdiskcount*100/svstatus.alldiskcount}">
										<span><fmt:formatNumber type="number"
												value="${svstatus.highdiskcount*100/svstatus.alldiskcount}"
												maxFractionDigits="2" />%</span>
									</div>
									<a class="title" href="#">高硬盘用量</a> <span>${svstatus.highdiskcount}
										/ ${svstatus.alldiskcount}</span>
								</div>
							</div>

							<div class="margin-bottom-10 visible-phone"></div>

							<div class="span4">
								<div class="easy-pie-chart">
									<div class="number green" id="memstatus"
										data-percent="${svstatus.highMemUsed*100/svstatus.allQuotaSiz}">
										<span><fmt:formatNumber type="number"
												value="${svstatus.highMemUsed*100/svstatus.allQuotaSiz}"
												maxFractionDigits="2" />%</span>
									</div>
									<a class="title" href="#">高内存负载</a> <span>${svstatus.highMemUsed}
										/ ${svstatus.allQuotaSiz}</span>
								</div>
							</div>

							<div class="margin-bottom-10 visible-phone"></div>

							<div class="span4">
								<div class="easy-pie-chart">
									<div class="number green" id="cpustatus"
										data-percent="${svstatus.hightCpuUsed*100/svstatus.allQuotaSiz}">
										<span><fmt:formatNumber type="number"
												value="${svstatus.hightCpuUsed*100/svstatus.allQuotaSiz}"
												maxFractionDigits="2" />%</span>
									</div>
									<a class="title" href="#">高CPU利用率</a> <span>${svstatus.hightCpuUsed}
										/ ${svstatus.allQuotaSiz}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row-fluid">
			<div class="span6">
				<div class="portlet box blue">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-calendar"></i>报警信息
						</div>
					</div>
					<div class="portlet-body">
						<div class="scroller" data-height="220px" data-always-visible="1"
							data-rail-visible="0">
							<ul class="feeds">
								<c:forEach items="${warnlist}" var="node">
									<li>
										<div class="col1">
											<div class="cont">
												<div class="cont-col1">
													<div class="${node.divclass}">
														<i class="${node.iclass}"></i>
													</div>
												</div>

												<div class="cont-col2">
													<div class="desc">${node.des}</div>
												</div>
											</div>
										</div>
									</li>
								</c:forEach>

							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="span6">
				<div class="portlet box blue">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-calendar"></i>心跳检测
						</div>
					</div>
					<div class="portlet-body">
						<div class="scroller" data-height="220px" data-always-visible="1"
							data-rail-visible="0">
							<ul class="feeds">
								<c:forEach items="${hblist}" var="node">
									<li>
										<div class="col1">
											<div class="cont">
												<div class="cont-col1">
													<div class="${node.divclass}">
														<i class="${node.iclass}"></i>
													</div>
												</div>
												<div class="cont-col2">
													<div class="desc">${node.sname}</div>
												</div>

											</div>
										</div>
										<div class="col2">
											<div class="date">${node.time}分钟前</div>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row-fluid">
			<div class="span6">
				<div class="portlet box blue">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-calendar"></i>数据汇集
						</div>
					</div>
					<div class="portlet-body">
						<div class="scroller" data-height="220px" data-always-visible="1"
							data-rail-visible="0">
							<ul class="feeds">
								<c:forEach items="${dilist}" var="node">
									<li>
										<div class="col1">
											<div class="cont">
												<div class="cont-col1">
													<div class="${node.divclass}">
														<i class="${node.iclass}"></i>
													</div>
												</div>
												<div class="cont-col2">
													<div class="desc">${node.src}</div>
												</div>

											</div>
										</div>
										<div class="col2">
											<div class="date">${node.count}条</div>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			<div class="span6">
				<div class="portlet box blue">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-calendar"></i>异常关机
						</div>
					</div>
					<div class="portlet-body">
						<div class="scroller" data-height="220px" data-always-visible="1"
							data-rail-visible="0">
							<ul class="feeds">
								<c:forEach items="${relist}" var="node">
									<li>
										<div class="col1">
											<div class="cont">
												<div class="cont-col1">
													<div class="${node.divclass}">
														<i class="${node.iclass}"></i>
													</div>
												</div>

												<div class="cont-col2">
													<div class="desc">${node.desc}</div>
												</div>
											</div>
										</div>
									</li>
								</c:forEach>

							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>